import React,{Component} from 'react'
import echarts from 'echarts'
class Charts extends Component{
	constructor(){
		super();
		this.state = {
			charts:null,
			options:{
				color:["#decdc3","#ea5455",'#2d4059'],
				title: {
				  text: '嘿嘿嘿'
				},
				tooltip: {},
				legend: {
				    data:['销量','价格']
				},
				xAxis: {
				    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
				},
				yAxis: {},
				series: [{
				    name: '销量',
				    type: 'line',
						smooth:true,
				    data: [5, 20, 36, 10, 10, 20]
				},
				{
				    name: '价格',
				    type: 'line',
						smooth:true,
				    data: [10, 50, 16, 104, 20, 60]
				},
				]
			}
		}
	}
	render(){
		return (
			<>
				<div id="charts" style={{ minHeight:300 }} ref={(chart)=>{ this.chart = chart }}/>
			</>
		)
	}
	componentDidMount(){
		this.initCharts();
	}
	initCharts = ()=>{
		let charts = echarts.init(this.chart);
		this.setState({
			charts
		},()=>{
			this.state.charts.setOption(this.state.options);
		})
		
	}
}

export default Charts